Lesson 2A
Reveal JS
(ver 1)
Start Adobe Dreamweaver
Check Website Settings
Click on Site>Manage Sites
Can you see the website name Reveal-JS?
If you can then click on HTML-5.
Click on Done.
Website Definition Missing
Only do the following steps if you could not see click on Reveal-JS.
Click on Import
Reveal-JS-Module-02a-ver01.doc
Page 2A-1
Lesson 2A
Reveal JS
(ver 1)
Open your Website-Definitions folder.
Open your Reveal-JS STE file.
Click on Reveal-JS.
Click on Done.
Everyone Join In
Click on File>Open.
Open index.html
Click on File>Save As.
Rename the file Lesson02-your name.
Reveal-JS-Module-02a-ver01.doc
Page 2A-2
Lesson 2A
Reveal JS
(ver 1)
Click on File>Open.
Open your home.html file.
Type the following heading.
Highlight or select these words.
Click on Insert>Hyperlink.
Click on Browse.
Click on the Lesson02 file.
Reveal-JS-Module-02a-ver01.doc
Page 2A-3
Lesson 2A
Reveal JS
(ver 1)
Click on OK.
Click on File>Save.
Arrange your screen as seen below.
Open your home.html file in Chrome.
Click on the Lesson 02 link.
Click on Lesson02.
Click on Code.
Compare your screen to the figure below.
Reveal-JS-Module-02a-ver01.doc
Page 2A-4
Lesson 2A
Reveal JS
(ver 1)
Make the following changes.
Test each change.
Reveal-JS-Module-02a-ver01.doc
Page 2A-5
Lesson 2A
Reveal JS
(ver 1)
Reveal-JS-Module-02a-ver01.doc
Page 2A-6
Lesson 2A
Reveal JS
(ver 1)
Find the following line.
Make the following change.
Save the changes and view the refreshed change
Click on New Tab.
Do an internet search on evolution or creationism.
Find a site that discusses this topic.
Reveal-JS-Module-02a-ver01.doc
Page 2A-7
Lesson 2A
Reveal JS
(ver 1)
Find a paragraph on this topic.
Find the text below.
Replace the above text with a paragraph on this subject.
Add a Paragraph
Type the commands
<p>
and </p> seen below.
Reveal-JS-Module-02a-ver01.doc
Page 2A-8
Lesson 2A
Reveal JS
(ver 1)
This paragraph was not written by you.
Acknowledge the source by copying and pasting the web address.
<p> means start a new paragraph.
</p> means end of paragraph.
You might have the following error.
If so, edit the change as seen below.
Save your changes.
Click back on the first tab.
Reveal-JS-Module-02a-ver01.doc
Page 2A-9
Lesson 2A
Reveal JS
(ver 1)
View the changes.
Vertical Slides
Advance to the next section.
Click on the Down arrow twice.
Let’s modify this example.
Reveal-JS-Module-02a-ver01.doc
Page 2A-10
Lesson 2A
Reveal JS
(ver 1)
Find the heading Cornify.
Make the following change.
Test the change.
Click on your second tab.
Search for the BMW logo.
Find one that is at least 500 pixels wide.
Reveal-JS-Module-02a-ver01.doc
Page 2A-11
Lesson 2A
Reveal JS
(ver 1)
View the full size image.
Right click, click on Save image.
Open your Reveal>images folder.
Name the file bmw-logo
Open this image in Adobe Photoshop
Double click on the Lock icon.
Click on OK.
Reveal-JS-Module-02a-ver01.doc
Page 2A-12
Lesson 2A
Reveal JS
(ver 1)
Delete the background
Resize Image
Click on Image>Image Size
Set the width to 400 pixels.
Let the software set the height, your example might be different.
Click on OK.
Save as PNG File
Click on File>Save As
Rename the file as seen below.
Change the file type to PNG.
Click on Save.
Minimize Photoshop as you will need it again soon.
Reveal-JS-Module-02a-ver01.doc
Page 2A-13
Lesson 2A
Reveal JS
(ver 1)
Find the web address for cornify.com
Replace the web address with bmw.com.au
Save your changes.
Hover over the unicorn.
Is the BMW web address visible?
Click on the link to test the link.
Click on the Back button.
Reveal-JS-Module-02a-ver01.doc
Page 2A-14
Lesson 2A
Reveal JS
(ver 1)
Find this line.
Delete the width & height command.
Carefully delete the rest of the line.
Do not delete the </a> tag.
Put the cursor at the shown position.
Click on Insert>Image.
Select your BMW 01 logo.
Click on OK twice.
Reveal-JS-Module-02a-ver01.doc
Page 2A-15
Lesson 2A
Reveal JS
(ver 1)
Your image details appear.
Save your changes.
Test the change.
Does the BMW logo appear?
Click on the link to see if the link works.
Click on the Back button.
Reveal-JS-Module-02a-ver01.doc
Page 2A-16
Lesson 2A
Reveal JS
(ver 1)
Click on the Up Arrow.
You should be at this point.
Find these words.
Make the following change.
Test the change.
Click on the second tab.
Do a search on ford
logo
Reveal-JS-Module-02a-ver01.doc
Page 2A-17
Lesson 2A
Reveal JS
(ver 1)
Save a high quality image of the Ford logo.
Name the image as seen below.
Double click on the Lock icon.
Click on OK.
Delete the background
Reveal-JS-Module-02a-ver01.doc
Page 2A-18
Lesson 2A
Reveal JS
(ver 1)
Resize Image
Click on Image>Image Size
Set the width to 400 pixels.
Let the software set the height, your example might be different.
Click on OK.
Save as PNG File
Click on File>Save As
Rename the file as seen below.
Change the file type to PNG.
Click on Save.
Close Photoshop.
Click on the first tab.
Place the cursor at the end of the indicated line.
Press the Enter key twice.
Place the cursor at the indicated position.
Reveal-JS-Module-02a-ver01.doc
Page 2A-19
Lesson 2A
Reveal JS
(ver 1)
Click on Insert>Image.
Select your Ford logo 01 PNG image.
Save the changes.
View the change.
Reveal-JS-Module-02a-ver01.doc
Page 2A-20